<template>
	<div>
		<home-header></home-header>
		<home-swiper :swiperList="swiperList"></home-swiper>
		<home-icons :iconList="iconList"></home-icons>
		<home-recommend :recommendList="recommendList"></home-recommend>
		<home-weekend :weekendList="weekendList"></home-weekend>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import homeHeader from './components/Header'
	import homeSwiper from './components/Swiper'
	import homeIcons from './components/Icons'
	import HomeRecommend from './components/Recommend'
	import HomeWeekend from './components/Weekend'
	import axios from 'axios'
	export default {
		name: 'Home',
		data() {
			return {
				lastCity: '',
				swiperList: [],
				iconList: [],
				recommendList: [],
				weekendList: []
			}
		},
		components: {
			homeHeader,
			homeSwiper,
			homeIcons,
			HomeRecommend,
			HomeWeekend,
		},
		computed: {
			...mapState(['city'])
		},
		methods: {
			getHomeInfo() {
				axios.get('/api/index.json?city=' + this.city).then(res => {
					this.getHomeInfoSucc(res)
				})
			},
			getHomeInfoSucc(res) {
				if(res && res.data){
					this.swiperList = res.data.data.swiperList;
					this.iconList = res.data.data.iconList;
					this.recommendList = res.data.data.recommendList;
					this.weekendList = res.data.data.weekendList;
				}
			}
		},
		mounted() {
			this.lastCity = this.city; // 临时缓存变量
			this.getHomeInfo();
		},
		activated() {
			if(this.lastCity != this.city){ // 如果城市有改变就重新发请求
				this.lastCity = this.city;
				this.getHomeInfo();
			}
		}
	}
</script>

<style>

</style>
